<template>
  <div class="card">
    <div class="card-title">{{ title }}</div>
    <dv-digital-flop :config="config" style="margin-top: -2vh" />
  </div>
</template>

<script>
  export default {
    computed: {
      config: function() {
        return {
          number: [this.value],
          content: '{nt}个',
          style: {
            fontSize: 15,
            fill: "#Ffffff"
          }
        };
      }
    },
    props: {
      title: {
        type: String,
        default: "高风险"
      },
      value: {
        type: Number,
        default: 100
      }
    }
  };
</script>

<style lang="scss" scoped>
.card {
  margin-top: 5px;
  height:8vh;
  width: 8vw;
  background-color: rgb(8, 38, 111);
  border: 1px solid #1b3242;
  border-radius: 15px;
  color: #ffffff;
  .card-title{
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
  }

}

.card:focus,
.card:hover {
  -webkit-box-shadow: 0 2px 12px 0 rgba(82, 179, 179, 0.5) !important;
  box-shadow: 0 2px 12px 0 rgb(104, 163, 208) !important;
}
</style>